<%@ page pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/inc/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/WEB-INF/view/inc/meta.jsp"%>
<title>G3通话</title>
<script type="text/javascript" src="${ctx}/js/jquery/bgstretcher/themes/style.css"></script>
<script type="text/javascript" src="${ctx}/js/jquery/bgstretcher/jquery.bgstretcher.js"></script>
<style type="text/css">
.top-nav {position: relative;top: 0px;left: 0px;width: 100%;height: 36px;text-align: left;border: 0px solid red;background-color: #4489B3;}
.top-nav ul {position: absolute;top: 10px;left: 20px;}
.top-nav ul li {float: left;padding-left: 22px;margin-right: 30px;}
.top-nav p {position: absolute;top: 10px;right: 20px;float: right;}
.top-nav a {font-size: 15px;color: #FFFFFF;}
.top-nav a:hover {text-decoration: none;cursor: pointer;}
</style>
</head>

<body>
<div id="bgStretcher" style="height: 200px; width: 300px; border:1px solid red; position: relative;"></div>
<div class="top-nav">
	<ul>
		<li><a href="javascript:void(0)">官方网站</a></li>
		<li><a href="javascript:void(0)">客户端下载</a></li>
		<li><a href="javascript:void(0)">网页版控件更新</a></li>
		<li><a href="javascript:void(0)">帮助</a></li>
	</ul>
	<p><a href="javascript:void(0)">下载桌面背景</a></p>
</div>

<div class="demo"></div>

<script type="text/javascript">
$(document).ready(function() {
	$('#bgStretcher').bgStretcher({
		images: [
			window.ctx + '/images/sample-1.jpg', 
			window.ctx + '/images/sample-2.jpg', 
			window.ctx + '/images/sample-3.jpg', 
			window.ctx + '/images/sample-4.jpg', 
			window.ctx + '/images/sample-5.jpg', 
			window.ctx + '/images/sample-6.jpg'
		],
		imageWidth: 800, 
		imageHeight: 400, 
		slideDirection: 'N',
		slideShowSpeed: 1000,
		transitionEffect: 'fade',
		sequenceMode: 'normal'
	});
});
</script>
</body>
</html>
